<template>
    <div class="drag-upload"
         @drop.prevent="onDrop"
         @dragover.prevent="dragOver = true"
         @dragleave.prevent="dragOver = false">

        <template v-if="files.length === 0">
            <span class="tip">文件拖拽到此</span>
        </template>
        <template v-else>
            <ul class="file-list">
                <li v-for="(file,index) in files" :key="index" class="file-item" v-text="file.path"></li>
            </ul>
        </template>
    </div>
</template>

<script type="text/ecmascript-6">
    /**
     * @author 白雨浓
     * @date 2018/10/17 11:55
     *
     * 拖拽上传
     **/
    export default {
        name: 'UploadToServerDragUpload',
        data() {
            return {
                dragOver: false,
                files: []
            }
        },
        mounted() {
            this.$nextTick(() => {

            })
        },
        methods: {
            onDrop(evt) {
                this.files = evt.dataTransfer.files;
                this.$emit('files', this.files);
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .drag-upload {
        display flex
        justify-content center
        align-items center
        width 600px
        height 200px

        margin auto

        border-radius 3px
        border 1px dashed #ddd
    }

    .tip {
        color #aaa
    }

    .file-list {
        list-style none
        text-align center
    }

    .file-item {
        width 550px
        color #ddd
        margin-top 2px
        white-space nowrap
        overflow hidden
        text-overflow ellipsis
    }
</style>
